<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/base.css" />
</head>

<body>
<div class="my-schedule">
	<div class="title-row">
		<span><i class="glyphicon glyphicon-calendar"></i>今日日程</span>
	</div>
	<div class="schedule-box">
		<!--
        	作者：595629466@qq.com
        	时间：2015-03-11
        	描述：显示上半日的日程
        -->
		<ul>
			<li>
				<input type="checkbox">
				<span class="schedule-time">09:55-10:55</span>
				<a class="schedule-title" data-modal = "">测试日程测试日程测试日程测试日程</a>
			</li>
			<li>
				<input type="checkbox">
				<span class="schedule-time">09:55-10:55</span>
				<a class="schedule-title" data-modal = "">测试日测试日程测试日程</a>
			</li>
			<li>
				<input type="checkbox">
				<span class="schedule-time">09:55-10:55</span>
				<a class="schedule-title" data-modal = "">测试日程测试程测试日程测试日程</a>
			</li>
		</ul>
		<hr>
		<!--
        	作者：595629466@qq.com
        	时间：2015-03-11
        	描述：显示下半日的日程
        -->
		<ul>
			
			<li>
				<input type="checkbox">
				<span class="schedule-time">19:55-20:55</span>
				<a class="schedule-title">测试日程</a>
			</li>
			<li>
				<input type="checkbox">
				<span class="schedule-time">09:55-10:55</span>
				<a class="schedule-title" data-modal = "">测试日测试日程测试日程</a>
			</li>
		</ul>
	</div>
</div>

<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/bootbox.min.js"></script>
<script>
	$(function(){
		{
			
			//页面勾选框事件处理
			$('.schedule-box').find('input[type="checkbox"]').on('click',function(){
				
				if(this.checked){
					//勾选
					$(this).siblings().css({'text-decoration':'line-through'});
				}else{
					//非勾选
					$(this).siblings().css({'text-decoration':'none'});
				}
			})
			
			//今日日程弹窗处理
			$('.schedule-box').find('a.schedule-title').on('click',function(){
				/*--
		        	作者：yaowei
		        	时间：2015-03-11
		        	描述：创建弹窗内容
		        	
		        --*/
				var form = $('<form class="form-inline"><label>今日日程</label></form>');
				var _schedule='<div class="schedule-modal">\
									<div class="title-row">\
										<input type="checkbox"><span class="title">日程标题</span>\
										<span class="schedul-time">09:55-10:55</span>\
									</div>\
									<div class="schedul-text">日程备注</div>\
								</div>'
				form.append(_schedule).find('input[type="checkbox"]').on('click',function(){
					//勾选框事件处理
					if(this.checked){
						$(this).parent('.title-row').css({'text-decoration':'line-through'});
					}else{
						$(this).parent('.title-row').css({'text-decoration':'none'});
					}
				});
				var div = bootbox.dialog({
					message: form
				});
			})
		}
	})
</script>
</body>
</html>
